<template>
  <div class="container">
    <div class="app-container">
      <el-row type="flex" justify="space-between	">
        <el-col :span="5" style="margin-right:20px;">
          <el-tree
            ref="tree"
            :data="orgList"
            node-key="id"
            :props="defaultProps"
            icon-class="el-icon-folder-checked"
            style="font-size: 14px;color: #2a2929;margin-top:10px;border-radius: 3px;height: 100%;"
            :default-expanded-keys="['1024982867475820033','1024984540818568481']"
            @node-click="treeChange"
          />
          <!-- 默认展开 当前 key 的数组列表 default-expanded-keys -->
        </el-col>
        <el-col>
          <div class="right-title">机构信息</div>
          <div class="main">
            <el-form ref="formData" :model="formData" label-width="100px" class="demo-ruleForm" :inline="true">
              <el-row type="flex" justify="flex-start">
                <el-form-item label="机构编号" prop="id">
                  <el-input v-model="formData.id" placeholder="" style="width:233px" disabled />
                </el-form-item>
                <el-form-item label="机构名称" prop="name">
                  <el-input v-model="formData.name" placeholder="" style="width:233px" disabled />
                </el-form-item>
                <el-form-item label="机构类型" prop="type">
                  <el-select v-model="formData.type" disabled placeholder="请选择" style="width:233px">
                    <el-option label="一级转运" value="1" />
                    <el-option label="二级转运" value="2" />
                    <el-option label="网点" value="3" />
                  </el-select>
                </el-form-item>
              </el-row>

              <el-row type="flex" justify="flex-start">
                <el-form-item label="机构地址" prop="">
                  <el-select v-model="formData.province" :disabled="disabled" placeholder="请选择" style="width:300px" @change="provinceChange">
                    <el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                  <el-select v-model="formData.city" :disabled="disabled" placeholder="请选择" style="width:300px;margin:0 10px;" @change="cityChange">
                    <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                  <el-select v-model="formData.county" :disabled="disabled" placeholder="请选择" style="width:300px">
                    <el-option v-for="item in area" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-row>

              <el-row type="flex" justify="flex-start">
                <el-form-item label="详细地址" prop="address">
                  <el-input v-model="formData.address" placeholder="" style="width:233px" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="经度" prop="longitude">
                  <el-input v-model="formData.longitude" placeholder="" style="width:233px" disabled />
                </el-form-item>
                <el-form-item label="纬度" prop="latitude">
                  <el-input v-model="formData.latitude" placeholder="" style="width:233px" disabled />
                </el-form-item>
              </el-row>

              <el-row type="flex" justify="flex-start">
                <el-form-item label="机构负责人" prop="managerName">
                  <el-input v-model="formData.managerName" placeholder="" style="width:233px" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="机构电话" prop="phone">
                  <el-input v-model="formData.phone" placeholder="" style="width:233px" :disabled="disabled" />
                </el-form-item>
              </el-row>

              <el-row type="flex" justify="center">
                <el-form-item>
                  <el-button v-if="disabled" type="primary" style="background: #e15536;width: 90px;border:0px" @click="editData">编辑</el-button>
                  <el-button v-else type="primary" style="background: #e15536;width: 90px;border:0px" @click="saveData">保存</el-button>
                </el-form-item>
              </el-row>

            </el-form>
          </div>

          <div class="right-title">员工信息</div>
          <div class="main">
            <el-table :data="userData" style="width: 100%">
              <el-table-column align="center" type="index" label="序号" />
              <el-table-column align="center" prop="userId" label="员工编号" />
              <el-table-column align="center" prop="name" label="员工姓名" />
              <el-table-column align="center" prop="mobile" label="手机号" />
              <el-table-column align="center" prop="agency.name" label="所属机构" />
              <el-table-column align="center" prop="account" label="系统账户" />
              <el-table-column align="center" prop="stationName" label="系统角色" />
              <el-table-column align="center" prop="status" label="账号状态">
                {{ userData.status ===0 ? '禁用' :'正常' }}
              </el-table-column>
            </el-table>
            <el-row type="flex" justify="end">
              <el-pagination layout="prev, pager, next" :total="total" @current-change="pageChange" />
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getOrgAPI, getOrgDetailAPI, getUserAPI } from '@/api/basic'
import { getLocationAPI } from '@/api/location'
export default {
  name: 'Organization',
  data() {
    return {
      orgList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      pageConfig: {
        page: 1, // 当前页
        pageSize: 5 // 每页条数
      },
      disabled: true,
      formData: {
        id: '',
        name: '',
        type: '',
        province: '',
        city: '',
        county: '',
        address: '',
        longitude: '',
        latitude: '',
        managerName: '',
        phone: ''
      },
      userData: [],
      province: [],
      city: [],
      area: [],
      total: 0
    }
  },
  created() {
    this.getOrgList()
    this.treeChange({ id: '1024985257948084801' })
  },
  methods: {
    async getOrgList() {
      const res = await getOrgAPI()
      // 将数组格式的字符串转换成数组
      // const arr = eval('(' + res.data.data + ')')
      const arr = JSON.parse(res.data.data)
      this.orgList = arr
    },
    async treeChange(data) {
      // 切换树获取员工信息页
      this.data = data
      const res1 = await getUserAPI({ ...this.pageConfig, agencyId: data.id })
      this.userData = res1.data.data.items
      this.total = +res1.data.data.counts
      // 切换树获取机构信息
      const res2 = await getOrgDetailAPI(data.id)
      this.formData = res2.data.data
      this.getProvince()
      this.getCity()
      this.getArea()
    },
    async getProvince() {
      // 获取省
      const res = await getLocationAPI({ parentId: this.formData.province.id })
      this.province = res.data.data
    },
    async getCity() {
      // 获取市
      const res = await getLocationAPI({ parentId: this.formData.city.id })
      this.city = res.data.data
    },
    async getArea() {
      // 获取区域
      const res = await getLocationAPI({ parentId: this.formData.county.id })
      this.area = res.data.data
    },
    provinceChange() {
      this.getCity()
      this.getArea()
      // this.formData.city = ''
      // this.formData.county = ''
    },
    cityChange() {
      this.getArea()
      // this.formData.county = ''
    },
    pageChange(page) {
      this.pageConfig.page = page
      this.treeChange(this.data)
    },
    editData() {
      this.disabled = false
    },
    async saveData() {
      // const res = await editOrgAPI(this.formData)
      // console.log(res)
      this.$message.error('很抱歉，演示系统，不允许不能修改')
      this.disabled = true
    }
  }
}
</script>

<style lang="scss" scoped>
.right-title{
  background-color: #fafafa;
  color : #2a2929;
  font-weight: 700;
  font-size: 16px;
  margin-top:10px;
  padding: 18px 20px;
  border-radius: 3px;

}
.main{
  background-color: #fff;
   margin-top: 2px;
   padding-top: 30px;
}
</style>
